<template>
	<view class="headerview spaceEvenly">
		<view @click="tabChange({ item: i, index })" :class="tabindex === index ? 'itemAct' : ''" class="item" v-for="(i, index) in tabList" :key="i.type">
			<view class="title">
				{{ i.name }}
			</view>
		</view>
	</view>
</template>

<script>
	import { number } from 'mathjs';
	export default {
		name: 'tabListView',
		props: {
			tabList: {
				type: [Array,Object],
				default: () => [],
			},
			tabindex: {
				type: Number,
				default: 0,
			},
		},
		data() {
			return {};
		},
		methods: {
			tabChange(obj) {
				this.$emit('tabChange', obj);
			},
		},
	};
</script>

<style lang="scss" scoped>
	.headerview {
		width: 100%;
		height: 80rpx;
		overflow: hidden;
		background: #ffffff;
		.item {
			margin-top: 15rpx;
			color: #999999;
			font-size: $uni-font-size-12;
			position: relative;
		}
		.itemAct {
			color: $price-color;
			&:before {
				position: absolute;
				content: '';
				width: 100%;
				height: 4rpx;
				background: #1fc28b;
				top: 45rpx;
			}
		}
	}
</style>
